<template>
  <div class="code">
    <input v-model="item.num" type="tel" maxlength="1" class="ant-input" v-for="(item,index) in captchas" :key="index" @input="inputFinash(index)" @keydown="inputDirection" :id="'captcha'+index">
  </div>
</template>

<script lang='ts'>
import { onMounted, reactive, SetupContext, toRefs } from "vue";
export default {
  props: {
    maxlength: {
      type: Number,
      default: 4,
    },
  },
  emits: ["onResultCode"],
  setup(props: any, ctx: SetupContext) {


    const data = reactive({
      activeInput: 0,
      captchas: [],
    } as { activeInput: number; captchas: { num: string }[] });


    for (let i = 0; i < props.maxlength; i++) {
      data.captchas.push({ num: "" });
    }


    /* 初始化焦点 */
    onMounted(() => {
      let oneDom: HTMLElement | null = document.getElementById("captcha0");
      oneDom ? oneDom.focus() : null;
    });


    function inputFinash(index: number) {

      function init() {
        let oneDom: HTMLElement | null = document.getElementById(
          "captcha" + data.activeInput
        );
        oneDom ? oneDom.focus() : null;
      }



      let captchas: string = data.captchas[index].num;
      if (data.captchas[index == 0 ? 0 : index - 1].num === "") init();



      if (
        /[0-9]/g.test(captchas) &&
        data.captchas[index == 0 ? 0 : index - 1].num != ""
      ) {
        if (captchas != "") {
          let dom: HTMLElement | null = document.getElementById(
            "captcha" + (index + 1)
          );
          data.activeInput = index + 1;
          if (dom) dom.focus();
        }
      } else {
        data.captchas[index].num = "";
      }



      if (data.captchas[data.captchas.length - 1].num != "") {
        let values: string = "";
        data.captchas.forEach((element: { num: string }, i: number) => {
          values += element.num;
          data.captchas[i].num = "";
        });
        ctx.emit("onResultCode", values);
        data.activeInput = 0;
        init();
      }
    }


    function inputDirection(event: KeyboardEvent) {
      if (event.code === "Backspace") {
        let dom: HTMLElement | null = document.getElementById(
          "captcha" + (data.activeInput - 1)
        );
        data.activeInput = data.activeInput - 1;
        if (dom) dom.focus();
      }
    }


    return {
      ...toRefs(data),
      inputFinash,
      inputDirection,
    };
  },
};
</script>

<style lang="less" scoped>
.ant-input {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  display: inline-block;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5715;
  background-image: none;
  border-radius: 2px;
  transition: all 0.3s;
}

.code {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  .ant-input {
    margin: 5px;
    width: 45px;
    height: 45px;
    font-size: 20px;
    text-align: center;
  }
}
</style>